import { useHistory } from 'react-router-dom';
import React from 'react'


const MyOrder = (props) => {

  let history = useHistory();

  const { orderList } = props

  return (
    <div className="order">
      <div className="order-top flex-row">
        <span className="order-my">我的订单</span>

        <div className="order-all flex-row">
          <span className="" onClick={e => { history.push('order/0') }}> 全部订单 <img
            style={{
              width: '.13rem',
              height: '.21rem',
              marginLeft: '.13rem'
            }}
            src="https://res.lexiangpingou.cn/images/826/2020/10/kZrQPuLVvq2zeRoVIr6vLR6HBl6Lk5.png" alt="" /> </span>
        </div>

      </div>
      <div className="order-content">
        <ul className="flex-row">
          {
            orderList.map((item, key) => {
              return (
                <li key={item.name + key} className="order-item flex-column" onClick={e => { history.push('/order/' + (key + 1)) }} >
                  <img className="order-img" src={item.src} alt="" />
                  <p className="order-type">{item.name}</p>
                </li>
              )
            })
          }
        </ul>
      </div>
    </div>
  )
}

export default MyOrder